前言

收集了常用的3列布局方案，左右固定，中间自适应方案，其中圣杯布局和双飞翼需要慢慢琢磨原理， 琢磨不透直接记下来用。

浮动

演示

<div class="content">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
    <div class="main">
        main
    </div>
</div>

.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 200px;
}
.main {
    margin-left: 200px;
    margin-right: 200px;
}

BFC

演示

<div class="content">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
    <div class="main">
        main
    </div>
</div>

.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 200px;
}
.main {
    overflow: auto;
}

定位

演示

<div class="content">
    <div class="main">
        main
    </div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

.content {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}
.main {
    margin-left: 200px;
    margin-right: 200px;
}

双飞翼布局

演示

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

.left {
    float: left;
    width: 200px;
    margin-left: -100%;
    
}
.right {
    float: right;
    width: 220px;
    margin-left: -230px
}
.content {
    float: left;
    width: 100%;
}
.main {
    clear: both;
    margin-left: 110px;
    margin-right: 220px;
}

圣杯布局

演示

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
    margin-left: 200px;
    margin-right: 200px;
}
.left {
    float: left;
    width: 200px;
    position: relative;
    margin-left: -100%;
    left: -200px;
}
.right {
    float: left;
    width: 200px;
    position: relative;
    right: -200px;
    margin-left: -200px
}
.main {
    float: left;
    width: 100%;
}

flex

演示

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    display: flex;
}
.left {
    order: 0;
    flex: 0 0 200px;
}
.right {
    order: 2;
    flex: 0 0 200px;
}
.main {
    order: 1;
    flex: 1 0 auto;
}

table

演示

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

.container {
    display: table;
    width: 100%;
}
.left {
    display: table-cell;
    width: 200px;
}
.right {
    display: table-cell;
    width: 200px;
}
.main {
    display: table-cell;
}